<template>
  <view class="orderPay">
    <view class="anmount">
      <view>实付金额</view>
      <view class="ftwt" v-if="!joinInfo.type">￥<text class="num">{{payMoney | current}}</text></view>
      <view class="ftwt" v-else>￥<text class="num">{{totalMoney | current}}</text></view>
    </view>
    <!-- <view class="mgt30">
      <view class="PriceDetails-li" v-if="postageData.userCashCoupon">
        <view class="PriceDetails-title flt-fl">当前可用{{postageData.userCashCoupon}}现金券抵现</view>
        <view class="PriceDetails-text flt-fr">
          <text class="color" v-if="isUseCash">-￥{{(postageData.userCashCoupon>(postageData.totalMoney+postageData.postageFee)?postageData.totalMoney+postageData.postageFee:postageData.userCashCoupon) | current}}</text>
          <view class="switch flt-fr">
            <switch  :color="color" style="transform:scale(0.7)" @change="cashChange" :checked="isUseCash"/>
          </view>
        </view>
      </view>
    </view> -->
    <view class="payList mgt30">
      <view class="orderTitle ftwt">平台支付</view>
      <view class="payItem">
        <view class="flex" :style="{color: payInfoData.balance >= payMoney?'':'#999999'}">
          <image :src="$store.state.imgBaseUrl + '/icon/blaIcon.png'" class="payIcon"/>
          余额支付(剩余：{{payInfoData.balance}}元)
        </view>
        <block v-if="payInfoData.balance >= payMoney">
          <image :src="$store.state.imgBaseUrl + '/icon/Fill.png'" class="checkIcon" @click="changePay('')" v-show="payType == 'local'"></image>
          <image :src="$store.state.imgBaseUrl + '/icon/icon_select_def.png'" class="checkIcon" v-show="payType != 'local'" @click="changePay('local')"></image>
        </block>
        <block v-else>
          <image :src="$store.state.imgBaseUrl + '/icon/icon_select_def.png'" class="checkIcon"></image>
        </block>
        
      </view>
      <view class="orderTitle mgt30 ftwt">第三方支付</view>
      <view class="payItem" v-if="env != 'zfb'">
        <view class="flex">
          <image :src="$store.state.imgBaseUrl + '/icon/WeChat.png'" class="payIcon"/>
          微信支付
        </view>  
        <image :src="$store.state.imgBaseUrl + '/icon/Fill.png'" class="checkIcon"  v-if="payType == 'WXP'" @click="changePay('')"></image>
        <image :src="$store.state.imgBaseUrl + '/icon/icon_select_def.png'" class="checkIcon" v-else @click="changePay('WXP')"></image>
      </view>
      <view class="payItem" v-else>
        <view class="flex">
          <image :src="$store.state.imgBaseUrl + '/icon/alipay.png'" class="payIcon"/>
          支付宝支付
        </view>
        <image :src="$store.state.imgBaseUrl + '/icon/Fill.png'" class="checkIcon" @click="changePay('')" v-if="payType == 'ALP'"></image>
        <image :src="$store.state.imgBaseUrl + '/icon/icon_select_def.png'" class="checkIcon" v-else @click="changePay('ALP')"></image>
      </view>
    </view>
    <!-- 底部按钮 -->
    <view class="bottomBtn">
      <view class="payBtn" @click="paysubmit">
        <text v-if="payType == 'local'">余额支付</text>
        <text v-else>{{payType == "ALP"? '支付宝支付':(payType==''?'':'微信支付')}}</text>
        ￥{{countTotalMoney?countTotalMoney:payInfoData.sum | current}}
      </view>
    </view>
    <!-- 底部按钮 -->
    <!-- 数字键盘开始 -->
   
    <view class="model-input-box" v-if="keyboard">
      <view class="model-input-container">
        <view class="password-container">
          <h6>请输入支付密码<span class="delete_btn" @click="keyboard=false"></span></h6>
          <view class="password">
            <span v-for="(item,index) in 6" :key="index">{{password[index] ? '*':''}}</span>
          </view>
          <view class="set-password"><span @click="goPassword">{{hasPwd?'找回':'设置'}}密码</span></view>
          <view class="payBtn" @click="payClick">确认支付</view>
        </view>
        <view class="number-container">
          <ul>
            <li v-for="item in 9" :key="item" @click="passwordClick(item)">{{item}}</li>
            <li class="noneNumber"></li>
            <li @click="passwordClick('0')">0</li>
            <li class="noneNumber" @click="deletePassword">X</li>
          </ul>
        </view>
      </view>
    </view>
    <!-- 数字键盘结束 -->
  </view>
</template>

<script>
import { payInfo, hasPassword, gotoPay } from '@/service/purchaseShop/goods.service.js';
import { OrderCost } from '@/service/purchaseShop/order.service.js';
import md5 from 'js-md5';
import { decideEnv } from '@/unit/common.js'
export default {
  data () {
    return {
      color:"#4CD964",
      totalMoney: '00.00',
      env: 1,
      payType: '', // local WXP ALP
      keyboard: false,
      password: [],
      hasPwd: false,
      disabled: false,
      couponStatus: '',
      payId: '',
      payInfoData: '',
      orderMainId: '',
      isUseCash: false,
      countTotalMoney: '',
      postageData: '',
      cash: 0,
      joinInfo: {
        type: null,
        grade: null
      },
      payMoney: 0, // 可计算的支付金额
      orderPay: 0 // 订单过来的支付金额
    }
  },
  onLoad (options) {
    if (options.payID) {
      this.payId = options.payID; // 支付订单的id
      this.cash = options.isCash; // 是否使用现金券
      this.orderMainId = options.orderMainId; // 订单列表过来的主订单id
      this.orderPay = options.payMoney; // 订单列表过来的支付金额
    } else {
      this.joinInfo.type = options.type;
      this.joinInfo.grade = options.grade;
    }
    
    this.env = decideEnv();
  },
  onShow: function() {
    if (this.joinInfo.type) { // 加盟入住的支付
      this.totalMoney = this.joinInfo.grade == 2 ? 4600 : this.joinInfo.grade == 3 ? 13800 : 98000;
    }
    // else { // 正常订单的支付
    // if (this.orderMainId) { // 商品订单支付时调用折扣邮费接口
    //   this.getOrderCost()
    // }
    // }
    this.payInfo();
    this.hasPassword(); // 是否设置支付密码
  },
  methods: {
    // getOrderCost () {
    //   OrderCost ({id: this.orderMainId},(res) => {
    //     if (res.status == 0) {
    //       this.postageData = res.data;
    //       this.countTotalMoney = res.data.totalMoney + res.data.postageFee;
    //     }
    //   })
    // },
    // cashChange (e) {
    //   this.isUseCash = e.target.value;
    //   this.cash = this.isUseCash ? 1 : 0;
    //   this.calcuAmount()
    // },
    // calcuAmount () {
    //   // 券不选择 选择现金券用totalMoney+邮费 - userCashCoupon
    //   if (this.isUseCash) {
    //     this.countTotalMoney = Number(this.countTotalMoney) - Number(this.postageData.userCashCoupon);
    //   } else {
    //     this.countTotalMoney = Number(this.countTotalMoney) + Number(this.postageData.userCashCoupon)
    //   }
    // },
    hasPassword () {
      hasPassword({}, (res) => {
        if (res.status === 0) {
          this.hasPwd = res.data
        }
      })
    },
    goPassword () {
      uni.navigateTo({
        url: '/pages/user/findPaymentPw'
      })
    },
    payInfo () {
      let params = {
        payId: this.payId,
        cash: this.cash
      }
      payInfo(params, (res) => {
        this.payInfoData = res.data;
        if (!this.orderMainId) {
          this.payMoney = res.data.sum;
        } else {
          this.payMoney = this.orderPay;
        }
      })
    },
    changePay (type) {
      if (this.disabled) return
      this.payType = type
    },
    passwordClick (item) {
      if (this.password.length >= 6) return
      this.password.push(item);
    },
    deletePassword () {
      if (this.password.length === 0) return
      this.password.pop()
    },
    paysubmit () {
      if (!this.payType) {
        uni.showToast({
          title: '请选择支付方式',
          icon: 'none'
        }); 
        return
      }
      if (this.payType !== 'local' && Number(this.payInfoData.sum) <= 0) {
        uni.showToast({
          title: '请选择本地支付',
          icon: 'none'
        });
        return
      }
      if (this.payType === 'local') {
        if (this.hasPwd) {
          this.keyboard = true
        } else {
          // localStorage.setItem('payUrl', window.location.href)
          // uni.navigateTo({
          //   url: '../login/setPassword/setPassword?type=3&isOrder=1'
          // })
          uni.navigateTo({
            url: '/pages/user/findPaymentPw'
          })
        }
      } else {
        this.payClick()
      }
    },
    payClick () {
      if (this.payType === 'local' && this.password.length !== 6) {
        uni.showToast({
          title: '请输入正确的密码',
          icon: 'none'
        });
        return;
      }
      let params = {
        payType: this.payType === 'local' ? 0 : 1,
        type: this.payType,
        payId: this.payId,
        cash: this.cash
      }
      if (this.payType === 'local') {
        params.payPassword = md5(this.password.join(''), 32)
      }
      gotoPay(params, (res) => {
        if (res.status === 0) {
          if (this.payType === 'local') {
            uni.reLaunch({
              url: '/pages/purchaseShop/paySuccess?payId=' + this.payId
            })
          } else {
            if (res.data.url) {
              window.location.href = res.data.url
            }
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
   
  }
}
</script>

<style scoped lang="scss">
  .mgt30 {
    margin-top: 30rpx;
  }
  .PriceDetails-li {
    padding: 30rpx 0;
    color: #333333;
    background-color: #FFFFFF;
    padding: 24rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .PriceDetails-title {
      font-size: 26rpx;
      line-height: 28rpx;
    }
    .PriceDetails-text {
      font-size: 28rpx;
      line-height: 28rpx;
      font-weight: 500;
      display: flex;
      align-items: center;
      .color{
        color: #FF7931;
        font-size: 28rpx;
      }
    }
  }
  .orderPay{   
    .anmount{
      padding:50rpx 0 38rpx 0 ;
      padding-left: 30rpx;
      background: #fff;
      text-align: center;
      font-size: 32rpx;
      .num{font-size: 52rpx;}
    }
    .checkIcon{
      width: 30rpx;
      height: 30rpx;
      margin-left: auto;
    }
    .payList{
      // padding-left:30rpx;
      .orderTitle{
        font-size: 32rpx;
        height: 100rpx;
        line-height: 100rpx;
        background: #fff;
        box-sizing: border-box;
        padding-left:30rpx;
      }
      .payItem{
        background: #fff;
        height: 110rpx;
        padding: 0 30rpx 0 30rpx;
        border-bottom: 2rpx solid #eee;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .flex {
          font-size: 28rpx;
          image {
            vertical-align: middle;
          }
        }
        .payIcon{
          width: 64rpx;
          height: 64rpx;
          margin-right: 16rpx;
        }
      }
    }
    .bottomBtn{
      width: 750rpx;
      height: 120rpx;
      background: #fff;
      position: fixed;
      left: 0;
      bottom: 0;
      border-top: 1rpx solid #f0f0f0;
      .payBtn{
        margin: 16rpx auto 0 auto;
        width: 700rpx;
        height: 88rpx;
        background:#434343;
        border-radius: 44rpx;
        font-size: 28rpx;
        color: #F6DA99;
        line-height: 88rpx;
        text-align: center;
      }
    }
    .model-input-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: flex-end;
      .model-input-container {
        width: 100%;
        overflow: hidden;
        .password-container {
          padding: 50rpx 0;
          background: #ffffff;
          border-radius: 40rpx 40rpx 0 0;
          h6 {
            position: relative;
            font-size: 30rpx;
            text-align: center;
            .delete_btn {
              position: absolute;
              top: 0;
              right: 20rpx;
              width: 60rpx;
              height: 120%;
              background: url("../../static/image/icon/icon_delete.png") center no-repeat;
              background-size: 30rpx 30rpx;
            }
          }
          .password {
            display: flex;
            width: 564rpx;
            margin: 56rpx auto 20rpx;
            border: 1rpx solid #e1e1e1;
            span {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 94rpx;
              height: 94rpx;
              color: #333333;
              font-size: 42rpx;
              font-weight: 600;
              border-left: 1px solid #e1e1e1;
              &:first-child {
                border-left: none;
              }
            }
          }
          .set-password{
            width: 564rpx;
            margin:0 auto 41rpx;
            text-align: right;
            color: #666;
            font-size: 24rpx;
          }
          .payBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 587rpx;
            height: 76rpx;
            color: #F6DA99;
            font-size: 28rpx;
            margin: 0 auto;
            border-radius: 100rpx;
            background: #434343;
          }
        }
        .number-container {
          background: #c7c7c7;
          ul {
            display: flex;
            flex-wrap: wrap;
            padding: 10rpx 10rpx 0;
            li {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 32%;
              height: 94rpx;
              color: #333333;
              font-size: 36rpx;
              font-weight: 600;
              margin-right: 2%;
              margin-bottom: 10rpx;
              border-radius: 10rpx;
              background: #ffffff;
              &:nth-child(3n) {
                margin-right: 0;
              }
              &.noneNumber {
                background: none;
              }
            }
          }
        }
      }
    }
  }
  
</style>
